<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    div{
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    span {
        padding: 10px 20px;
        background-color: black;
        color: #fff;
        font-size: 50px;
        border-radius: 10px;
        display: inline-block;
        vertical-align: middle;
        margin: 0 5px;
    }
</style>

<body>
    <div>
        <span id="t"></span>
        <span>天</span>
        <span id="h"></span>
        <span>时</span>
        <span id="m"></span>
        <span>分</span>
        <span id="s"></span>
        <span>秒</span>
    </div>
    <script>

        var getTime = function() {
            var t = document.querySelector('#t')
            var h = document.querySelector('#h')
            var m = document.querySelector('#m')
            var s = document.querySelector('#s')

            var date = +new Date();
            var Edate = +new Date('2023 / 4 / 15 12:00:00');
            var time = parseInt((Edate - date) / 1000);

            if (time <= 0) {
                t.innerHTML = '00';
                h.innerHTML = '00';
                m.innerHTML = '00';
                s.innerHTML = '00';
            } else {
                var tt = parseInt(time / 60 / 60 / 24);
                tt = tt < 10 ? '0' + tt : tt;

                var hh = parseInt(time / 60 / 60) % 24;
                hh = hh < 10 ? '0' + hh : hh;

                var mm = parseInt(time / 60) % 60;
                mm = mm < 10 ? '0' + mm : mm;

                var ss = time % 60;
                ss = ss < 10 ? '0' + ss : ss;

                t.innerHTML = tt;
                h.innerHTML = hh;
                m.innerHTML = mm;
                s.innerHTML = ss;
            }
            setInterval(getTime,1000)
        };
        getTime();
        
    </script>
</body>

</html>